<!--
 * @Author: 朱安武 549410045@qq.com
 * @Date: 2023-01-05 20:22:42
 * @LastEditors: 朱安武 549410045@qq.com
 * @LastEditTime: 2023-01-06 21:07:42
 * @FilePath: \elementUi\src\components\MainHome.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="demo-rate-block">
      <span class="demonstration">评分</span>
      <el-rate v-model="value2" :colors="colors" clearable />
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  
  const value2 = ref(null)
  const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']) 
  
  </script>
  
  <style scoped>
  .demo-rate-block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
  }
  .demo-rate-block:last-child {
    border-right: none;
  }
  .demo-rate-block .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }
  </style>
  